<template>
	<div id="sys_params">
		<main-head>
			<span slot="after">
				<el-button plain size="medium" @click="openDialog" type="primary" icon="el-icon-plus">添加轮播图</el-button>
			</span>
		</main-head>
		<main-content>
			<el-form :inline="true" :model="params" class="demo-form-inline">
				<!-- 表格顶部 -->
				<el-form-item label="创建日期">
					<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" @change="dateSearch()">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="">
					<el-select v-model="params.type" clearable placeholder="按类型筛选分类">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-button type="primary" @click="search()">搜索</el-button>
			</el-form>

			<!-- 轮播图表格 -->
			<el-table :data="list" stripe style="width: 100%" v-loading="load">
				<el-table-column prop="id" label="id" align="center"></el-table-column>

				<el-table-column prop="title" label="轮播图描述" align="center"></el-table-column>

				<el-table-column :prop="path" label="主图" align="center" width="200">
					<template slot-scope="scope">
						<el-image style="width: 100px; height: 100px; border-radius: 10%" :src="scope.row.path"
							:preview-src-list="scope.row.path.split(',')">
						</el-image>
					</template>
				</el-table-column>

				<el-table-column prop="url" label="跳转地址" align="center">
					<template slot-scope="scope">
						<!-- {{ scope.row.remark == null ? "暂无" : scope.row.remark }} -->
						<el-button type="text" @click="select(scope.row.url)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="轮播图序列号" sortable align="center"></el-table-column>

				<el-table-column label="创建时间" align="center">
					<template slot-scope="scope">
						<span>{{
              $moment(scope.row.createTime).format("Y-MM-DD HH:mm")
            }}</span>
					</template>
				</el-table-column>

				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button type="danger" plain size="small" @click="deleteItem(scope.row.id)">删除</el-button>
						<el-button type="primary" plain size="small" @click="openUpdateDialog(scope.row)">修改
						</el-button>
					</template>
				</el-table-column>
			</el-table>


			<!-- 跳转地址 -->
			<el-dialog title="跳转地址" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<span>{{url}}</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>



			<!-- 分页 -->
			<el-pagination class="page" background :layout="
          $store.state.isPhone
            ? 'total, prev, pager, next'
            : 'total, sizes, prev, pager, next, jumper'
        " :current-page.sync="params.pageNo" :page-size.sync="params.pageSize" :total="total" @size-change="search"
				@current-change="getList">
			</el-pagination>



			<!-- 添加dialog -->
			<el-dialog title="添加轮播图" :visible.sync="addDialog" width="30%">
				<el-form :model="addForm" :label-width="labelWidth" :rules="rule" ref="form">

					<el-form-item label="所属位置：" prop="type">
						<el-select v-model="addForm.type" clearable placeholder="按所属位置分类">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="主图:" prop="path">
						<upload ref="addAvatar" :limit_size="1" :isCompress="true" :bigBox="true"></upload>
					</el-form-item>

					<el-form-item label="轮播图描述：" prop="title">
						<el-input placeholder="请输入分类描述" v-model="addForm.title" clearable>
						</el-input>
					</el-form-item>
					<el-form-item label="位置序列：" prop="sort">
						<el-input-number v-model="addForm.sort" :step="1" :min="0" :max="5">
						</el-input-number>
					</el-form-item>
					<el-form-item label="跳转地址：" prop="url">
						<el-input placeholder="请输入跳转地址" v-model="addForm.url" clearable>
						</el-input>
					</el-form-item>
					
					<el-form-item label="备注：" prop="remark">
						<el-input placeholder="请输入备注" v-model="addForm.remark" clearable>
						</el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="success" @click="add()">添加</el-button>
				</div>
			</el-dialog>


			<!-- 修改dialog -->
			<el-dialog title="修改轮播图" :visible.sync="updateDialog" width="30%">
				<el-form :model="updateForm" :label-width="labelWidth" :rules="rule" ref="update">

					<el-form-item label="所属位置：" prop="type">
						<el-select v-model="updateForm.type" clearable placeholder="按所属位置分类">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="主图:" prop="path">
						<upload ref="updateAvatar" :limit_size="1" :isCompress="true" :bigBox="true"></upload>
					</el-form-item>

					<el-form-item label="轮播图描述：" prop="title">
						<el-input placeholder="请输入分类描述" v-model="updateForm.title" clearable>
						</el-input>
					</el-form-item>
					<el-form-item label="跳转地址：" prop="url">
						<el-input placeholder="请输入跳转地址" v-model="updateForm.url" clearable>
						</el-input>
					</el-form-item>
					<el-form-item label="位置序列：" prop="sort">
						<el-input-number v-model="updateForm.sort" :step="1" :min="0" :max="5">
						</el-input-number>
					</el-form-item>
					<el-form-item label="备注：" prop="remark">
						<el-input placeholder="请输入备注" v-model="updateForm.remark" clearable>
						</el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="success" @click="updateItem()">修改</el-button>
				</div>
			</el-dialog>
		</main-content>
	</div>
</template>

<script>
	import Upload from '@/components/utils/Upload';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				dialogVisible: false, //跳转地址弹窗
				url: '',

				type: "",
				options: [{
						value: 0,
						label: "附近好地",
					},
					{
						value: 1,
						label: "商城",
					}

				],
				//表单Label宽度
				labelWidth: "100px",
				addForm: {
					sort: 0,
					type: "",

				},
				path:'',
				updateForm: {
					type: "",
				},
				addDialog: false,
				updateDialog: false,
				date: "",
				list: [],
				load: false,
				params: {
					pageSize: 10,
					pageNo: 1,
					isCount: true,
					startTime: "",
					endTime: "",
					type: 0,
				},
				total: 0,
				rule: {
					path: {
						message: "请上传轮播图",
						required: true,
					},
					type: {
						message: "请选择类型",
						required: true,
					},
					
					sort: {
						message: "请输入序列号",
						required: true,
					},
				},
			};
		},

		mounted() {
			this.search();
		},

		methods: {
			// 跳转地址弹窗打开
			select(row) {
				this.dialogVisible = true
				this.url = row
			},
			// 跳转地址弹窗关闭
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},

			search() {
				this.params.pageNo = 1;
				this.params.isCount = true;
				this.getList();
			},

			getList() {
				this.load = true;
				this.$request.post({
					url: "system/sysBanner/list",
					params: this.params,
					success: (result) => {
						console.log(result);
						if (this.params.isCount) {
							this.total = result.total;
						}
						this.params.isCount = false;
						this.list = result.list;
					},
					finally: () => {
						this.load = false;
					},
				});
			},

			//时间改变
			dateSearch() {
				this.params.startTime = this.$moment(this.date[0]).format(
					"Y-MM-DD HH:mm:ss"
				);
				this.params.endTime = this.$moment(this.date[1]).format(
					"Y-MM-DD HH:mm:ss"
				);
				this.search();
			},
			//修改状态
			update(id) {
				let usId = id;
				this.$request.post({
					url: "admin/adUsInfo/updateStatus",
					params: {
						usId
					},
					success: (result) => {
						this.search();
					},
				});
			},
			cleanDialog() {
				this.addForm = {};
				this.updateFor = {};
			},
			openDialog(row) {
				this.cleanDialog();
				this.addDialog = true;
				console.log(row);
				this.form = row;
			},
			//添加分类
			add() {
				this.addForm.path = this.$refs.addAvatar.getPaths();

				this.$refs["form"].validate((valid) => {
					if (!valid) {
						return;
					}

					const formData = new FormData();
					formData.append("path", this.addForm.path);
					formData.append("remark", this.addForm.remark);
					formData.append("title", this.addForm.title);
					formData.append("type", this.addForm.type);
					formData.append("url", this.addForm.url);
					formData.append("sort", this.addForm.sort);

					this.$request.post({
						url: "/system/sysBanner/addOrUpdate",
						params: formData,
						success: (result) => {
							this.$message.success("添加成功");
							this.addDialog = false;
							this.cleanDialog();
							this.search();
						},
					});
				});
			},
			
			//删除
			deleteItem(id) {
				this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.$request.post({
						url: "system/sysBanner/delete",
						params: {
							id
						},
						success: (result) => {
							this.$message.success(result);
							this.updateDialog = false;
							this.cleanDialog();
							this.search();
						},
					});
				});
			},

			openUpdateDialog(row) {
				this.cleanDialog();
				this.updateDialog = true;
				//浅拷贝
				this.updateForm = JSON.parse(JSON.stringify(row));
				console.log(this.updateForm);
				if(this.updateForm.remark =="undefined"){
					this.updateForm.remark = ''
				}
				console.log('eeeeee',this.updateForm);
				let path = this.updateForm.path.replace("[", "").replace("]", "");
				this.$nextTick(() => {
					this.$refs.updateAvatar.clean();
					this.$refs.updateAvatar.addPathList(path);
				});
			},
			//修改分类
			updateItem() {
				this.$nextTick(() => {
					this.updateForm.path = this.$refs.updateAvatar.getPaths();
					this.$refs["update"].validate((valid) => {
						if (valid) {
							delete(this.updateForm.updateTime)
							delete(this.updateForm.createTime)
							
							const formData = new FormData();
							formData.append("path", this.updateForm.path);
							formData.append("id", this.updateForm.id);
							formData.append("remark", this.updateForm.remark);
							formData.append("title", this.updateForm.title);
							formData.append("type", this.updateForm.type);
							formData.append("url", this.updateForm.url);
							formData.append("sort", this.updateForm.sort);
							
							this.$request.post({
								url: "system/sysBanner/addOrUpdate",
								params: formData,
								success: (result) => {
									this.$message.success(result);
									this.updateDialog = false;
									this.cleanDialog();
									this.search();
								},
							});
						}
					})

				})
			},
		},
	};
</script>

<style>
</style>

<style scoped>
	.page {
		text-align: right;
		margin-top: 20px;
	}
</style>
